<template>
    <div>
        <!--head  -->
        <div class="app-head">
            <div class="app-head-inner">
                <img src="../assets/logo.png" alt="logo">
                <div class="head-nav">
                    <ul class="nav-list">
                        <li>{{username}}</li>
                        <li v-if="username===''" @click="logClick">登录</li>
                        <li class="nav-pile">|</li>
                        <li @click="regClick">注册</li>
                        <li class="nav-pile">|</li>
                        <li @click="aboutClick">关于</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="app-content">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <!--foot  -->
        <div class="app-foot">
            <p>©2017 Baidu 使用百度前必读 意见反馈 京ICP证030173号</p>
        </div>
        <my-dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')">
            <log-form @has-log="onSuccessLog"></log-form>
        </my-dialog>
        <my-dialog :is-show="isShowRegDialog" @on-close="closeDialog('isShowRegDialog')">
            <reg-form></reg-form>
        </my-dialog>
        <my-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')" :is-height="400">
            <p style="line-height:150%;padding:15px">北京时间7月28日（美国东部时间7月27日），全球最大中文搜索引擎百度（NASDAQ：BIDU）公布了2017年第二季度未经审计的财务报告。本季度百度营收为208.74亿人民币（约合30.79亿美元），同比增长14.3%；净利润44.15亿人民币（约合6.51亿美元），同比增长82.9%；非美国通用会计准则下，净利润55.71亿元人民币（约合8.22亿美元），同比增长98.4%；其中移动营收占比72%，高于去年同期的62%。 百度董事长兼CEO李彦宏表示：“在第二季度，百度宣布了新的使命——用科技让复杂的世界更简单。为了实现这一使命，我们将坚持两个核心战略：夯实移动基础，决胜AI时代。我们以人工智能为基础驱动力来不断完善现有核心业务，尤其是手机百度、搜索、资讯流等核心产品。同时为了发掘长期市场机遇，我们将继续通过开放平台与生态系统拓展新兴的AI驱动型业务。” 百度副董事长、集团总裁兼COO陆奇表示：“第二季度我们取得了长足的进步，业绩稳步上升，核心业务和AI驱动的新兴业务都取得有重大意义的进展。手机百度App与资讯流进展显著，其活跃客户数的稳定增长再次证明了百度独一无二的价值。在百度Create AI开发者大会上，我们展现了百度的AI平台和生态系统的领导地位，这将为公司带来广阔的商业机遇。同时爱奇艺持续巩固其在线视频行业的领先地位。” 百度CFO李昕晢表示：“在第二季度公司取得了稳健的业绩成果，我们将不断改善平台运营效率，在核心技术与生态系统上持续投入。为了更好地完成百度在AI时代的使命，公司将更加严谨地进行资源分配，为股东创造长期的价值。”
            </p>
        </my-dialog>
    </div>
</template>

<script>
import dialog from './dialog'
import logForm from './logForm'
import regForm from './regform'
export default {
    components: {
        myDialog: dialog,
        logForm,
        regForm
    },
    data() {
        return {
            isShowLogDialog: false,
            isShowRegDialog: false,
            isShowAboutDialog: false,
            username:''
        }
    },
    methods: {
        logClick() {
            this.isShowLogDialog = true
        },
        regClick() {
            this.isShowRegDialog = true
        },
        aboutClick() {
            this.isShowAboutDialog = true
        },
        closeDialog(Attr) {
            this[Attr] = !this[Attr]
        },
        onSuccessLog(data) {
            console.log(data)
            this.closeDialog('isShowLogDialog')
            this.username = data.username
        }
    }
}
</script>

<style>
/* reset */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
    margin: 0;
    padding: 0;
}

header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th {
    text-align: left;
    font-weight: normal;
}

html,
body,
fieldset,
img,
iframe,
abbr {
    border: 0;
}

i,
cite,
em,
var,
address,
dfn {
    font-style: normal;
}

[hidefocus],
summary {
    outline: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
    font-size: 100%;
}

sup,
sub {
    font-size: 83%;
}

pre,
code,
kbd,
samp {
    font-family: inherit;
}

q:before,
q:after {
    content: none;
}

textarea {
    overflow: auto;
    resize: none;
}

label,
summary {
    cursor: default;
}

a,
button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
    font-weight: bold;
}

del,
ins,
u,
s,
a,
a:hover {
    text-decoration: none;
}

body,
textarea,
input,
button,
select,
keygen,
legend {
    font: 12px/1.14 arial, \5b8b\4f53;
    color: #333;
    outline: 0;
}

body {
    background: #fff;
}

a,
a:hover {
    color: #333;
}

.clear:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

.clear {
    zoom: 1;
}





/* 头部 */

.app-head {
    background: #4e4e4e;
    color: #fff;
}

.app-head-inner {
    zoom: 1;

    width: 1200px;
    height: 50px;
    margin: auto;
    color: #fff;
}

.app-head-inner:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

.app-head-inner img {
    width: 40px;
    margin-top: 5px;
    float: left;
}

.app-head-inner .head-nav {
    float: right;
}

.app-head-inner .nav-list li {
    float: left;
    padding: 10px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.app-head-inner .nav-list li:hover {
    color: #41b883;
}





/*内容  */

.app-content {
    background: #eee;
}





/* 尾部 */

.app-foot {
    text-align: center;
    padding: 10px;
}

.button {
    background: #4fc08d;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}

.button:hover {
    background: #4fc08d;
}


/* form */

.g-form {}

.g-form-line {
    padding: 15px 0;
}

.g-form-label {
    width: 100px;
    font-size: 16px;
    display: inline-block;
}

.g-form-input {
    display: inline-block;
}

.g-form-input input {
    height: 30px;
    width: 200px;
    line-height: 30px;
    vertical-align: middle;
    padding: 0 10px;
    border: 1px solid #ccc;
}

.g-form-btn {
    padding-left: 100px;
}

.g-form-error {
    color: red;
    padding-left: 15px;
}
</style>
